<template>
  <div class="pagination">
    <el-pagination
      background
      small
      style="text-align: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="parseInt(this.currentPage) || 1"
      :page-sizes="pageSizes || [10, 20, 30]"
      :page-size="parseInt(this.pageSize) || 10"
      :layout="!pagination?'prev, pager, next':'total, sizes, prev, pager, next,jumper'"
      :total="parseInt(this.total)"
      :pager-count="5"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  name: "FortressPagination",
  props: {
    total: [Number, String],
    currentPage: [Number, String],
    pageSizes: Array,
    pageSize: [Number, String],
  },
  data () {
    return {
      pagination: true
    }
  },
  methods: {
    handleSizeChange (val) {
      this.$emit("refreshData", {
        current: parseInt(this.currentPage) || 1,
        size: val,
      });
    },
    handleCurrentChange (val) {
      this.$emit("refreshData", {
        current: val,
        size: parseInt(this.pageSize) || 10,
      });
    },
  },
  created () {
    var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
    if (w <= 768) {
      this.pagination = false
    } else {
      this.pagination = true
    }

  },
  mounted () {
    window.addEventListener(
      "resize",
      () => {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
        if (w <= 768) {
          this.pagination = false
        } else {
          this.pagination = true
        }
      },
      false,
    )
  },
};
</script>

<style scoped lang="scss">
.pagination {
  display: flex;
  justify-content: flex-end;
}
.pagination
  /deep/
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: #0cafcc;
  color: #fff;
}
.pagination /deep/ .el-pager li.active {
  color: #fff !important;
}
</style>
